<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../../vendors/custom/custom.min.css" rel="stylesheet">
    <!--Bootstrap-table-->
    <link href="../../vendors/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <!--自定义样式覆盖-->
    <style>
        body {
            background: #F7F7F7;
        }
    </style>
</head>
<body>

<!--页面表格-->
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table id="table" class="table table-striped jambo_table bulk_action"></table>
            </div>
        </div>
    </div>
</div>

<!--表格 工具栏-->
<div id="toolbar">
    <button id="add" class="btn btn-danger">
        <i class="fa fa-plus"></i> Add
    </button>
</div>

<!--添加分类弹出层-->
<div class="modal fade" id="addModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加分类</h4>
            </div>
            <div id="alertBlock2"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-add">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">出发地：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="fromAddress-add" name="fromAddress">
                        </div>
                        <label class="col-sm-2 control-label">目的地：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="toAddress-add" name="toAddress">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮费：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="money" name="money">
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="add_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--删除确认弹出层-->
<div class="modal fade" id="delcfmModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">提示信息</h4>
            </div>
            <div id="alertBlock"></div>
            <div class="modal-body">
                <p>您确认要删除吗？</p>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="deleteID" name="pid"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="delSubmit()" class="btn btn-success">确定</button>
            </div>
        </div>
    </div>
</div>

<!--编辑弹出层-->
<div class="modal fade" id="tableModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加分类</h4>
            </div>
            <div id="alertBlock3"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-edit">
                    <input type="hidden" name="tid" id="tid-edit">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">出发地：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="fromAddress-edit" name="fromAddress">
                        </div>
                        <label class="col-sm-2 control-label">目的地：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="toAddress-edit" name="toAddress">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮费：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="money-edit" name="money">
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="edit_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--jQuery -->
<script src="../../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../../vendors/iCheck/icheck.min.js"></script>

<!--Bootstrap-table-->
<script src="../../vendors/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="../../vendors/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

<!-- Custom Theme Scripts -->
<script src="../../vendors/custom/custom.min.js"></script>
<!--myself script-->
<script src="../../vendors/myself/myself.js"></script>

<script type="text/javascript">

    const $table = $('#table');

    $(function () {
        var table = new tableInit();
        table.Init();
    });

    var tableInit = function () {
        var table = new Object()
        table.Init = function () {
            $('#table').bootstrapTable({
                toolbar: '#toolbar',
                url: '/transport/queryAll',
                method: 'get',                      //请求方式（*）
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,           //传递参数（*）
                sidePagination: "server",           //分页方式：客户端分页，server服务端分页（*）
                strictSearch: true,
                clickToSelect: true,                //是否启用点击选中行
                height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                showRefresh: true,                      //刷新
                search: true,                       // 搜索
                columns: [{
                    field: 'tid',
                    title: '送货地址id',
                    align: 'center'
                }, {
                    field: 'fromAddress',
                    title: '出发地',
                    align: 'center'
                }, {
                    field: 'toAddress',
                    title: '目的地',
                    align: 'center'
                }, {
                    field: 'money',
                    title: '邮费',
                    align: 'center'
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }]
            });
        }
        return table;
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return 'pageSize=' + params.limit + '&' + 'pageIndex=' + (params.offset / params.limit + 1) + '&' + 'search=' + params.search;
    }

    // 表格操作格式化
    function operateFormatter(value, row, index) {
        return [
            '<a class="edit" href="javascript:void(0)" title="Edit">',
            '<i class="fa fa-pencil"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
    }

    // 表格事件
    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            // alert(`You click edit action, row: ${JSON.stringify(row)}`);
            $('#fromAddress-edit').val(row.fromAddress);
            $('#toAddress-edit').val(row.toAddress);
            $('#money-edit').val(row.money);
            $('#tid-edit').val(row.tid);
            $('#tableModel').modal();
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteID').val(row.tid);
            $('#delcfmModel').modal();
        }
    };

    // 模态层删除事件
    function delSubmit() {
        $.ajax("/transport/deleteTran", {
            type: 'post',
            data: 'tid=' + $('#deleteID').val(),
            success: function (data) {
                window.location.reload();
                $('#myAlert').alert();
            },
            error: function (data) {
                $('#alertBlock').html('<div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>删除失败。 </div>');
            }
        });
    }

    // 模态层添加事件
    $('#edit_submit').click(function () {
        var formData = $('#form-edit').serializeObject();
        $.ajax("/transport/updateTran", {
            type: 'post',
            datatype: 'json',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function (data) {
                window.location.reload();
                $('#myAlert3').alert();
            },
            error: function (data) {
                $('#alertBlock3').html('<div id="myAlert3" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>保存失败。 </div>');
            }
        });
    });

</script>

<!--添加-->
<script type="text/javascript">
    // 点击添加按钮跳出模态层
    $('#add').click(function () {
        $('#addModel').modal();
    });

    // 数据库添加按钮事件
    $('#add_submit').click(function () {
        var formData = $('#form-add').serializeObject();
        $.ajax("/transport/addTran", {
            type: 'post',
            datatype: 'json',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function (data) {
                window.location.reload();
                $('#myAlert2').alert();
            },
            error: function (data) {
                $('#alertBlock2').html('<div id="myAlert2" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>添加失败。 </div>');
            }
        });
    });
</script>

</body>

</html>

